<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="status-card" :style="{background: statusBgColor}">
			<text class="status-text">{{statusText}}</text>
			<text class="status-desc">{{statusDesc}}</text>
		</view>

		<!-- 收货信息 -->
		<view class="address-card">
			<view class="address-header">
				<image src="/static/location.png" class="location-icon"></image>
				<text>收货信息</text>
			</view>
			<view class="address-content">
				<text class="receiver">{{order.name}}</text>
				<text class="phone">{{order.phone}}</text>
				<text class="address">{{order.address}}</text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view v-if='order.items' class="goods-card">
			<view class="card-header">
				<text>商品清单</text>
			</view>
			<view class="goods-list">
				<view v-for="(item,index) in order.items" :key="index" class="goods-item">
					<image :src="item.__metadata.specification.__metadata.product.__metadata.cover" class="goods-image">
					</image>
					<view class="goods-info">
						<text
							class="goods-name">{{item.__metadata.specification.__metadata.product.__metadata.name}}</text>
						<text class="goods-spec">{{item.__metadata.specification.__metadata.name}}</text>
					</view>
					<view class="goods-price">
						<text>¥{{item.__metadata.price}}</text>
						<text class="goods-count">x{{item.__metadata.quantity}}</text>
					</view>
				</view>
			</view>
			<view class="goods-footer">
				<text>共{{order.items.length}}件商品</text>
				<text class="total-price">合计：¥{{order.price}}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="info-card">
			<view class="info-item">
				<text>订单编号：</text>
				<text>{{order.no}}</text>
			</view>
			<view class="info-item">
				<text>下单时间：</text>
				<text>{{$u.timeFormat(new Date(order.createdTime), 'yyyy/mm/dd hh:MM:ss')}}</text>
			</view>
		</view>

		<!-- 物流信息 -->
		<u-popup :show="showPop" @close="showPop=false" mode='bottom'>
			<view style='height:60vh;overflow: auto;padding:20px;'>
				<view v-if='shippingData == ""' @click='showPop = false'>
					<u-steps direction='column'>
						<u-steps-item title="等待揽件" desc="正在等待快递员上门揽件">
						</u-steps-item>
					</u-steps>
				</view>
				<view v-else>
					<u-steps direction='column' current='0' activeColor='#19be6b' inactiveColor='#909399'>
						<u-steps-item v-for="item in shippingData" :title="item.msg" :desc="item.time">
						</u-steps-item>
					</u-steps>
				</view>
			</view>
		</u-popup>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<button v-if="order.status == 1" class="btn primary" @click="handlePay">立即支付</button>
			<button v-if="order.status == 1" class="btn cancel" @click="handleCancel">取消订单</button>
			<button v-if="order.status >= 2" class="btn warning" @click="afterSlaes">申请售后</button>
			<button v-if="order.status >= 2" class="btn defult" @click="getShippingData">查看物流</button>
			<button class="btn contact" open-type="contact">联系客服</button>
		</view>
	</view>
</template>

<script>
	import wechatPay from '@/utils/wechat-pay.js'
	export default {
		data() {
			return {
				order: {},
				showPop: false,
				shippingData: ''
			}
		},
		onLoad(options) {
			if (typeof(options.id) != 'undefined') {
				uni.showLoading()
				this.request.get(`api/orders/${options.id}`,{
					'@expands': "['entity.items.specification.product']"
				}).then((res) => {
					this.order = res.data
					uni.hideLoading()
				})
			}
		},
		computed: {
			statusText() {
				const map = {
					1: '待支付',
					2: '待发货',
					3: '已发货',
					4: '已完成',
					'-1': '已取消'
				}
				return map[this.order.status] || '未知状态'
			},
			statusDesc() {
				const map = {
					1: '请尽快完成支付',
					2: '等待商家发货',
					3: '等待确认收货',
					'-1': '已取消'
				}
				return map[this.order.status] || ''
			},
			statusBgColor() {
				const colors = {
					1: '#FF5500',
					2: '#00AA66',
					3: '#ff9900',
					4: 'primary',
					'-1': '#909399'
				}
				return colors[this.order.status] || '#999999'
			}
		},
		methods: {
			getShippingData() {
				console.log('获取物流信息')
				uni.showLoading({
					title: '正在获取物流信息'
				})
				this.request.get(`public/orders/${this.order.id}/track-shipping`).then((res) => {
					console.log('shippingData', res.data)
					const shippingData = []
					for (let i of res.data.path_item_list) {
						let date = new Date(i.action_time * 1000)
						date =
							`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
						shippingData.push({
							msg: i.action_msg,
							time: date
						})
					}
					this.shippingData = shippingData
					this.showPop = true
					uni.hideLoading()
				})
			},
			afterSlaes() {
				uni.navigateTo({
					url: `/pages/mine/after-sales?id=${this.order.id}`
				})
			},
			handlePay() {
				wechatPay(this.order.invoice.id).then((res) => {
					uni.hideLoading()
					uni.showModal({
						title: '',
						content: '支付成功！',
						showCancel: false,
						success: () => {
							this.order.status = 2
						}
					})
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						title: '',
						content: '支付失败，请重试',
						showCancel: false,
						success: () => {}
					})
				})
			},
			handleCancel() {
				uni.showModal({
					title: '取消订单',
					content: '确定要取消此订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.request.post(`api/orders/${this.order.id}/cancel-and-refund`).then((res) => {
								this.order.status = res.data.status
								uni.showToast({
									title: '订单已取消',
									icon: 'success'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.order-detail {
		padding-bottom: 120rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.status-card {
		padding: 40rpx;
		color: #FFFFFF;
	}

	.status-text {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.status-desc {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.address-card,
	.goods-card,
	.info-card {
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.address-header {
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.address-content {
		padding: 20rpx;
	}

	.receiver {
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #666666;
	}

	.address {
		display: block;
		font-size: 28rpx;
		margin-top: 15rpx;
		line-height: 1.6;
	}

	.card-header {
		padding: 20rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.goods-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.goods-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.goods-info {
		flex: 1;
		padding: 0 20rpx;
	}

	.goods-name {
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-spec {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.goods-price {
		width: 120rpx;
		text-align: right;
	}

	.goods-count {
		display: block;
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.goods-footer {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #f5f5f5;
	}

	.total-price {
		font-weight: bold;
		margin-left: 20rpx;
	}

	.info-item {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.btn {
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		border-radius: 32rpx;
	}

	.primary {
		background-color: #67C23A;
		color: #FFFFFF;
	}

	.warning {
		background-color: #FF5500;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
	}

	.cancel {
		background-color: #FFFFFF;
		color: #666666;
		border: 1rpx solid #CCCCCC;
	}

	.contact {
		background-color: #FFFFFF;
		color: #333333;
		border: 1rpx solid #CCCCCC;
	}
</style>